<template>
  <div>
    <!-- 头部 -->
    <div id="mall">
      <span class="iconfont">&#xe6bc;</span>
      <h2>小U商城</h2>
      <p class="lost">
        <span class="iconfont">&#xf0112;</span>
        <i></i>
        <span class="iconfont">&#xe71e;</span>
      </p>
    </div>
    <!-- 搜索和导航 -->
    <div id="sectionM">
      <!-- 上 -->
      <div class="top">
        <span class="iconfont">&#xe613; </span>
        <h1>
          <img src="../assets/images/logo.jpg" alt="" />
        </h1>
        <input
          type="text"
          class="iconfont"
          placeholder="按内容搜索"
          @keydown.enter="goSearch(keywords)"
          v-model="keywords"
        />
        <span class="iconfont icon-store_icon"></span>
      </div>
      <!-- 下 -->
      <div class="under">
        <span
          >推荐
          <i></i>
        </span>
        <nav>
          <a href="#" v-for="item in catelist" :key="item.id">
            {{ item.catename }}
          </a>
        </nav>
        <p><span class="iconfont">&#xe611;</span>分类</p>
      </div>
    </div>
    <!-- 轮播图 -->
    <v-swiper></v-swiper>
    <ul id="img_li">
      <li>
        <img src="../assets/images/icon_1.jpg" alt="" />
        <p>限时秒杀</p>
      </li>
      <li>
        <img src="../assets/images/icon_2.jpg" alt="" />
        <p>畅销商品</p>
      </li>
      <li>
        <img src="../assets/images/icon_3.jpg" alt="" />
        <p>品质大牌</p>
      </li>
      <li>
        <img src="../assets/images/icon_4.jpg" alt="" />
        <p>小U自营</p>
      </li>
      <li>
        <img src="../assets/images/icon_5.jpg" alt="" />
        <p>积分商城</p>
      </li>
    </ul>
    <div id="show_off" class="clearfix">
      <div class="left" v-for="item in secklist" :key="item.id">
        <img :src="item.img" alt="" />
        <div class="content">
          <h2>限时秒杀</h2>
          <p class="p1">查看更多></p>
          <p class="p2">每天0点场，好货秒不停</p>
          <!-- //倒计时 -->
          <p class="p3">
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </p>
        </div>
      </div>
      <div class="right">
        <p><img src="../assets/images/01.jpg" alt="" /></p>
        <p><img src="../assets/images/02.jpg" alt="" /></p>
      </div>
    </div>

    <!-- 双十一预购 -->
    <div id="pre-order">
      <div class="title">
        <h2>双十一尖货预购</h2>
        <h2>畅购全球</h2>
      </div>
      <div class="product">
        <p>
          <img src="../assets/images/images/0.1.jpg" alt="" />
          <span>套装/礼盒</span>
        </p>
        <p>
          <img src="../assets/images/images/0.2.jpg" alt="" />
          <span>彩妆礼盒</span>
        </p>
        <p>
          <img src="../assets/images/images/0.3.jpg" alt="" />
          <span>身体乳液/霜</span>
        </p>
        <p>
          <img src="../assets/images/images/0.4.jpg" alt="" />
          <span>爽肤水/化妆水</span>
        </p>
      </div>
    </div>
    <div id="recommend">
      <div class="top">
        <h2 :class="{ select: index == 0 }" @click="index = 0">热门推荐</h2>
        <h2 :class="{ select: index == 1 }" @click="index = 1">精选推荐</h2>
        <h2 :class="{ select: index == 2 }" @click="index = 2">全部推荐</h2>
      </div>
      <div class="commodity">
        <!-- //热门推荐列表 -->
        <ul v-if="index == 0">
          <li
            @click="goDetail(item.id)"
            v-for="item in hotslist"
            :key="item.id"
          >
            <img :src="item.img" alt="" />
            <div>
              <p class="p1">商品：{{ item.goodsname }}</p>
              <p class="p2">现价格：{{ item.price }}</p>
              <p class="p3">原价格：{{ item.market_price }}</p>
              <p class="btn">立即抢购</p>
            </div>
          </li>
        </ul>
        <!-- //精选推荐列表 -->
        <ul v-if="index == 1">
          <li @click="goDetail(item.id)" v-for="item in newlist" :key="item.id">
            <img :src="item.img" alt="" />
            <div>
              <p class="p1">商品：{{ item.goodsname }}</p>
              <p class="p2">现价格：{{ item.price }}</p>
              <p class="p3">原价格：{{ item.market_price }}</p>
              <p class="btn">立即抢购</p>
            </div>
          </li>
        </ul>
        <!-- //全部推荐列表 -->
        <ul v-if="index == 2">
          <li
            @click="goDetail(item.id)"
            v-for="item in goodslist"
            :key="item.id"
          >
            <img :src="item.img" alt="" />
            <div>
              <p class="p1">商品：{{ item.goodsname }}</p>
              <p class="p2">现价格：{{ item.price }}</p>
              <p class="p3">原价格：{{ item.market_price }}</p>
              <p class="btn">立即抢购</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入axios库
import axios from "axios";
//封装引入好的轮播图
import vSwiper from "../components/vSwiper.vue";
//引入封装好的接口
import { getHomeGoods, getHomeCate, getSeckill } from "../request/api";
export default {
  data() {
    return {
      hotslist: [],
      newlist: [],
      goodslist: [],
      index: 0,
      catelist: [],
      secklist: [],
      keywords: "",
      time: 30 * 60 * 60 * 1000,
    };
  },
  mounted() {
    //商品信息（首页）
    axios
      .all([getHomeCate(), getHomeGoods(), getSeckill()])
      .then(
        axios.spread((cate, goods, seck) => {
          if (cate.data.code == 200) {
            this.catelist = cate.data.list;
          } else {
            alert(cate.data.msg);
          }
          if (goods.data.code == 200) {
            this.hotslist = goods.data.list[0].content;
            this.newlist = goods.data.list[1].content;
            this.goodslist = goods.data.list[2].content;
          } else {
            alert(goods.data.msg);
          }
          if (cate.data.code == 200) {
            this.secklist.push(seck.data.list[0]);
          }
        })
      )
      .catch((err) => {
        console.log(err, "错误了");
      });
  },
  methods: {
    goDetail(id) {
      console.log(this.$router, "去详情页");
      this.$router.push("/detail/" + id);
    },
    goSearch(keywords) {
      this.$router.push("/search/" + keywords);
    },
  },
  components: {
    vSwiper,
  },
};
</script>

<style scoped>
@import "../assets/css/mall.css";
</style>
